<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">

    <ui:define name="title">
        Form Layout
    </ui:define>

    <ui:define name="description">
        Form layout is a CSS utility optimized for creating forms with ease. FormLayout is not included in PrimeFaces as it is provided by
       <a href="https://primeflex.org/" target="_blank" rel="noopener noreferrer">PrimeFlex</a>,
        a shared grid library between PrimeFaces, PrimeNG, PrimeReact and PrimeVue projects.
    </ui:define>

    <ui:param name="documentationLink" value="/components/formlayout"/>

    <ui:define name="implementation">

        <h:form>

            <div class="card">
                <h5>Vertical</h5>
                <div class="ui-fluid">
                    <div class="field">
                        <p:outputLabel for="firstname1" value="Firstname"/>
                        <p:inputText id="firstname1"/>
                    </div>
                    <div class="field">
                        <p:outputLabel for="lastname1" value="Lastname"/>
                        <p:inputText id="lastname1"/>
                    </div>
                </div>
            </div>

            <div class="card">
                <h5>Vertical and Grid</h5>
                <div class="ui-fluid formgrid grid">
                    <div class="field col">
                        <p:outputLabel for="firstname2" value="Firstname"/>
                        <p:inputText id="firstname2"/>
                    </div>
                    <div class="field col">
                        <p:outputLabel for="lastname2" value="Lastname"/>
                        <p:inputText id="lastname2"/>
                    </div>
                </div>
            </div>

            <div class="card">
                <h5>Horizontal and Fixed Width</h5>
                <div class="field grid">
                    <p:outputLabel for="firstname3" styleClass="col-fixed" style="width:100px" value="Firstname"/>
                    <div class="col">
                        <p:inputText id="firstname3"/>
                    </div>
                </div>
                <div class="field grid">
                    <p:outputLabel for="lastname3" styleClass="col-fixed" style="width:100px" value="Lastname"/>
                    <div class="col">
                        <p:inputText id="lastname3"/>
                    </div>
                </div>
            </div>

            <div class="card">
                <h5>Horizontal and Fluid</h5>
                <div class="ui-fluid">
                    <div class="field grid">
                        <p:outputLabel for="firstname4" styleClass="col-12 md:col-2" value="Firstname"/>
                        <div class="col-12 md:col-10">
                            <p:inputText id="firstname4"/>
                        </div>
                    </div>
                    <div class="field grid">
                        <p:outputLabel for="lastname4" styleClass="col-12 md:col-2" value="Lastname"/>
                        <div class="col-12 md:col-10">
                            <p:inputText id="lastname4"/>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card">
                <h5>Inline</h5>
                <div class="formgroup-inline">
                    <div class="field">
                        <p:outputLabel for="firstname5" styleClass="ui-sr-only" value="Firstname"/>
                        <p:inputText id="firstname5" placeholder="Firstname"/>
                    </div>
                    <div class="field">
                        <p:outputLabel for="lastname5" styleClass="ui-sr-only" value="Lastname"/>
                        <p:inputText id="lastname5" placeholder="Lastname"/>
                    </div>
                    <p:button value="Submit"/>
                </div>
            </div>

            <div class="card">
                <h5>Vertical Checkbox</h5>
                <div class="field-checkbox">
                    <p:selectBooleanCheckbox id="v_option1"/>
                    <p:outputLabel for="v_option1" value="Option 1"/>
                </div>
                <div class="field-checkbox">
                    <p:selectBooleanCheckbox id="v_option2"/>
                    <p:outputLabel for="v_option2" value="Option 2"/>
                </div>

                <h5>Horizontal Checkbox</h5>
                <div class="formgroup-inline">
                    <div class="field-checkbox">
                        <p:selectBooleanCheckbox id="h_option1"/>
                        <p:outputLabel for="h_option1" value="Option 1"/>
                    </div>
                    <div class="field-checkbox">
                        <p:selectBooleanCheckbox id="h_option2"/>
                        <p:outputLabel for="h_option2" value="Option 2"/>
                    </div>
                </div>
            </div>

            <div class="card">
                <h5>Help Text</h5>
                <div class="field ui-fluid">
                    <p:outputLabel for="username" value="Username"/>
                    <p:inputText id="username"/>
                    <small id="username-help">Enter your username to reset your password.</small>
                </div>
            </div>

            <div class="card">
                <h5>Advanced</h5>
                <div class="ui-fluid formgrid grid">
                    <div class="field col-12 md:col-6">
                        <p:outputLabel for="firstname6" value="Firstname"/>
                        <p:inputText id="firstname6"/>
                    </div>
                    <div class="field col-12 md:col-6">
                        <p:outputLabel for="lastname6" value="Lastname"/>
                        <p:inputText id="lastname6"/>
                    </div>
                    <div class="field col-12">
                        <p:outputLabel for="address" value="Address"/>
                        <p:inputTextarea id="address" rows="4"/>
                    </div>
                    <div class="field col-12 md:col-6">
                        <p:outputLabel for="city" value="City"/>
                        <p:inputText id="city"/>
                    </div>
                    <div class="field col-12 md:col-3">
                        <p:outputLabel for="state" value="State"/>
                        <p:selectOneMenu id="state">
                            <f:selectItem itemLabel="Select One" itemValue="#{null}" noSelectionOption="true"/>
                            <f:selectItem itemLabel="Option 1" itemValue="Option 1"/>
                            <f:selectItem itemLabel="Option 2" itemValue="Option 2"/>
                            <f:selectItem itemLabel="Option 3" itemValue="Option 3"/>
                        </p:selectOneMenu>
                    </div>
                    <div class="field col-12 md:col-3">
                        <p:outputLabel for="zip" value="Zip"/>
                        <p:inputText id="zip"/>
                    </div>
                </div>
            </div>

        </h:form>

    </ui:define>

</ui:composition>
